import React from 'react'
import {Form, Button, Modal, Input} from 'antd'
import {connect} from 'umi'

const FormItem = Form.Item;
const EditPwd = (props) => {
  const {onSubmit, onCancel, visible, loading} = props;
  const [form] = Form.useForm();

  const onFormCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    onSubmit({
      ...fieldsValue,
    });
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" loading={loading} onClick={() => handleSubmit()}>保存</Button>
      </>
    )
  };

  return (
    <Modal
      maskClosable={false}
      width={'35%'}
      title='修改二级密码'
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
    >
      <Form form={form} style={{paddingTop: '24px', paddingBottom: '24px'}} layout="horizontal" labelCol={{span: 6}}
            wrapperCol={{span: 14}}>
        <FormItem name="oldPwd" label="原二级密码" rules={[{required: true, message: '原二级密码不能为空！'}]} hasFeedback>
          <Input.Password/>
        </FormItem>
        <FormItem name="newPwd" label="新二级密码" rules={[{required: true, message: '新二级密码不能为空！'}]} hasFeedback>
          <Input.Password/>
        </FormItem>
        <FormItem name="confirmPwd" label="确认二级密码" dependencies={['newPwd']} hasFeedback
                  rules={[{required: true, message: '确认二级密码不能为空！'},
                    ({getFieldValue}) => ({
                      validator(rule, value) {
                        if (!value || getFieldValue('newPwd') === value) {
                          return Promise.resolve();
                        }
                        return Promise.reject('输入的新二级密码不一致，请重新输入！');
                      }
                    })]}>
          <Input.Password/>
        </FormItem>
      </Form>
    </Modal>
  )
};

export default connect(({user}) => ({
  currentUser: user.currentUser,
}))(EditPwd)
